<template>
  <el-button :icon="Plus" class="primaryBth ml20 add" type="primary" @click="add" v-if="!unAdd">新增</el-button>
  <el-button :icon="Delete" class="primaryBth ml20 delete" type="primary" @click="delList" v-if="!unSub">删除</el-button>
  <!-- <el-button :icon="Edit" class="primaryBth ml20 edit" type="primary" @click="editOne" v-if="!unEdit">修改当前行</el-button> -->

  <el-drawer v-model="drawerStore.visible" :direction="'ttb'" size="small" :with-header="false">
    <span @click="drawerStore.visible = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
    <div class="flex" style="flex-direction: column; width: 100%">
      <div class="flex">
        <el-button :icon="Edit" class="primaryBth add" type="primary" @click="addOne">新增空白行</el-button>
        <el-button :icon="Edit" class="primaryBth ml20 edit" type="primary" @click="save">保存</el-button>
      </div>
      <Table
        :data="{ tableHeader, tableData: drawerStore.tableData, isLoading }"
        :outTableHeight="150"
        @currentRow="currentRow"
        @functionClick="functionClick"
      />
    </div>
  </el-drawer>
</template>

<script lang="ts">
import { debounce } from 'lodash'
import { defineComponent, reactive, ref, type PropType, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDrawerStore } from '@/stores/drawer'
import service from '@/utils/request'
export default defineComponent({
  name: 'JDialog'
})
</script>

<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { Delete, Edit, Search, Share, Upload, Plus } from '@element-plus/icons-vue'

const emits = defineEmits(['removeOne', 'drawerVisible', 'addOne', 'save'])
const isLoading = ref(false)

const drawerStore = useDrawerStore()
const props = defineProps({
  drawerVisible: {
    type: Boolean,
    default: false
  },
  formList: Array as any,
  width: Number,
  tableHeader: Array as any,
  unSub: {
    type: Boolean,
    default: false
  },
  unAdd: {
    type: Boolean,
    default: false
  },
  unEdit: {
    type: Boolean,
    default: true
  },
  currentTableRow: {
    type: Object as any,
    default: () => {
      return {}
    }
  },
  getOptionList: {
    type: Function as any
  },
  unClearAdd: {
    type: Boolean as any,
    default: false
  }
})

// 点击+触发函数
const obj = ref<any>({})
const add = () => {
  drawerStore.$state.visible = true
  drawerStore.$state.tableData = []
}
const addOne = () => {
  drawerStore.$state.tableData.push({ change: true, unDetail: true })
  emits('addOne')
  // tableData.value.push({ change: true })
}

// 删除
const delList = () => {
  ElMessageBox.confirm('是否删除？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      emits('removeOne')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功'
      })
    })
}

onMounted(() => {
  obj.value = JSON.parse(JSON.stringify(props.currentTableRow))
})

const selectedLists = ref([]) as any
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}

// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = drawerStore.$state.tableData[0]) => {
  currentTableRow.value = row
}
const functionClick = (title: any, row: any, index: any) => {
  if (title === 'delete') {
    drawerStore.$state.tableData.splice(index, 1)
  }
}

// 保存
const save = async () => {
  emits('save', drawerStore.$state.tableData)
}
</script>

<style lang="less" scoped>
:deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: none;
}
.edit {
  background-color: #1c84c6 !important;
}

.add {
  background-color: #23c6c8 !important;
}

.delete {
  background-color: red !important;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  // height: 26px;
}

.AC {
  align-items: center;
  flex-wrap: wrap;
}

.span {
  float: right;
  color: var(--el-text-color-secondary);
}

.floatL {
  overflow: hidden;
  float: left;
}
</style>
